import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:ichinesereader/controller/authentication.dart';
import 'package:ichinesereader/pages/helpDoc/helpHome.dart';
import 'package:ichinesereader/utils/log.dart';
import 'package:toggle_switch/toggle_switch.dart';
import '../../constants.dart';
import '../../controller/cache.dart';
import '../../controller/user.dart';
import '../../localization/localization.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

// ignore: must_be_immutable
class SettingsBarHorizontal extends StatelessWidget {
  SettingsBarHorizontal(this.showThemeSwitch, this.pageName);
  bool showThemeSwitch = false;
  String pageName;
  final LoginController _loginController = Get.find();
  final UserController _userController = Get.find();
  final box = Hive.box('appconfig');

  final colorizeColors = Get.isDarkMode
      ? [
          Get.theme.primaryColorDark,
          Get.theme.primaryColorDark,
          Colors.purple,
          Colors.blue,
          Colors.yellow,
          Colors.red,
        ]
      : [
          Get.theme.primaryColorLight,
          Get.theme.primaryColorLight,
          Colors.purple,
          Colors.blue,
          Colors.yellow,
          Colors.red,
        ];

  final colorizeTextStyle = TextStyle(
      fontSize: 25.0, fontFamily: 'Montserrat', overflow: TextOverflow.fade);

  @override
  Widget build(BuildContext context) {
    Log.debug('start building SettingsBarHorizontal');
    final String _userName = box.get(CacheManagerKey['username'].toString());
    bool interfaceChinese = box.get('interfaceChinese') ?? false;
    return Container(
        margin: EdgeInsets.only(top: 12.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Visibility(
                  visible: this.pageName != '' && this.pageName == 'Home',
                  child: Container(
                    child: AnimatedTextKit(
                      pause: Duration(milliseconds: 2000),
                      animatedTexts: [
                        ColorizeAnimatedText(
                          _userName.toUpperCase(),
                          textStyle: colorizeTextStyle,
                          colors: colorizeColors,
                        ),
                      ],
                      isRepeatingAnimation: true,
                      totalRepeatCount: 2,
                      onTap: () {
                        if (this.pageName != '' && this.pageName == 'Home') {
                          String _userRole =
                              box.get(CacheManagerKey['nanhairole'].toString());
                          switch (_userRole) {
                            case Constants.NanhaiRole_Student:
                              Get.offAllNamed('/student/profile');
                              break;
                            case Constants.NanhaiRole_Individual:
                              Get.offAllNamed('/individual/profile');
                              break;
                            case Constants.NanhaiRole_Teacher:
                              Get.offAllNamed('/teacher/profile');
                              break;
                            case Constants.NanhaiRole_SchoolAdmin:
                              Get.offAllNamed('/schooladmin/profile');
                              break;
                            case Constants.NanhaiRole_Parent:
                              Get.offAllNamed('/parent/profile');
                              break;
                            default:
                              Get.offAllNamed('/xlogin');
                          }
                        }
                      },
                    ),
                  ),
                ),
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Row(
                  children: [
                    Visibility(
                      visible: showThemeSwitch,
                      child: Padding(
                        padding: const EdgeInsets.only(right: 6.0),
                        child: ToggleSwitch(
                          minWidth: 50.0,
                          cornerRadius: 3.0,
                          activeBgColors: [
                            [
                              Get.isDarkMode
                                  ? Get.theme.primaryColor
                                  : Get.theme.primaryColorLight,
                            ],
                          ],
                          activeFgColor: Get.isDarkMode
                              ? Colors.black
                              : Get.theme.primaryColor,
                          inactiveBgColor: Get.isDarkMode
                              ? Get.theme.primaryColorDark
                              : Colors.blueGrey.withOpacity(0.6),
                          inactiveFgColor:
                              Get.isDarkMode ? Colors.black : Colors.black,
                          totalSwitches: 2,
                          icons: [
                            Icons.brightness_7,
                            Icons.bedtime,
                          ],
                          onToggle: (index) {
                            Log.debug('switched to: $index');
                            index == 0
                                ? _userController.changeTheme(isDarkMode: false)
                                : _userController.changeTheme(isDarkMode: true);
                          },
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        String localLang = '简体';
                        try {
                          _userController.setMyLang(localLang);
                          switch (localLang) {
                            case 'ENG':
                              _userController.profile.value.lang = 0;
                              break;
                            case '简体':
                              _userController.profile.value.lang = 1;
                              break;
                            case '繁体':
                              _userController.profile.value.lang = 2;
                              break;
                            default:
                              _userController.profile.value.lang = 0;
                          }
                          LocalizationService().changeLocale(localLang);
                        } catch (error) {
                          LocalizationService().changeLocale('ENG');
                          Log.debug(error);
                        }
                      },
                      child: Container(
                        margin: EdgeInsets.all(3),
                        child: Stack(alignment: Alignment.center, children: [
                          Container(
                            width: 42,
                            height: 42,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.white.withOpacity(0.3)
                                  : Get.theme.primaryColorLight
                                      .withOpacity(0.3),
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 6,
                                  spreadRadius: 1,
                                  color: Get.isDarkMode
                                      ? Colors.transparent
                                      : Colors.black.withOpacity(0.1),
                                  offset: Offset(3, 3),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: 33,
                            height: 33,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Get.theme.primaryColorDark.withOpacity(0.3),
                              borderRadius: BorderRadius.circular(3),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.all(10),
                            child: Center(
                              child: Container(
                                width: 21,
                                height: 21,
                                decoration: BoxDecoration(),
                                child: SvgPicture.asset(
                                  "assets/images/simplifiedIcon.svg",
                                  colorFilter: ColorFilter.mode(
                                      Get.isDarkMode
                                          ? Colors.black
                                          : Colors.white.withOpacity(0.8),
                                      BlendMode.srcIn),
                                  // color: Get.isDarkMode
                                  //     ? Colors.black
                                  //     : Colors.white.withOpacity(0.8),
                                ),
                              ),
                            ),
                          ),
                        ]),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        String localLang = '繁体';
                        try {
                          _userController.setMyLang(localLang);
                          switch (localLang) {
                            case 'ENG':
                              _userController.profile.value.lang = 0;
                              break;
                            case '简体':
                              _userController.profile.value.lang = 1;
                              break;
                            case '繁体':
                              _userController.profile.value.lang = 2;
                              break;
                            default:
                              _userController.profile.value.lang = 0;
                          }
                          LocalizationService().changeLocale(localLang);
                        } catch (error) {
                          LocalizationService().changeLocale('ENG');
                          Log.debug(error);
                        }
                      },
                      child: Container(
                        margin: EdgeInsets.all(3),
                        child: Stack(alignment: Alignment.center, children: [
                          Container(
                            width: 42,
                            height: 42,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.white.withOpacity(0.3)
                                  : Get.theme.primaryColorLight
                                      .withOpacity(0.3),
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 6,
                                  spreadRadius: 1,
                                  color: Get.isDarkMode
                                      ? Colors.transparent
                                      : Colors.black.withOpacity(0.1),
                                  offset: Offset(3, 3),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: 33,
                            height: 33,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Get.theme.primaryColorDark.withOpacity(0.3),
                              borderRadius: BorderRadius.circular(3),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.all(10),
                            child: Center(
                              child: Container(
                                width: 21,
                                height: 21,
                                decoration: BoxDecoration(),
                                child: SvgPicture.asset(
                                  "assets/images/traditionalIcon.svg",
                                  colorFilter: ColorFilter.mode(
                                      Get.isDarkMode
                                          ? Colors.black
                                          : Colors.white.withOpacity(0.8),
                                      BlendMode.srcIn),
                                  // color: Get.isDarkMode
                                  //     ? Colors.black
                                  //     : Colors.white.withOpacity(0.8),
                                ),
                              ),
                            ),
                          ),
                        ]),
                      ),
                    ),
                    interfaceChinese == true &&
                            box.get(CacheManagerKey['nanhairole']).toString() ==
                                'STUDENT'
                        ? Text('')
                        : GestureDetector(
                            onTap: () {
                              String localLang = 'ENG';
                              try {
                                _userController.setMyLang(localLang);
                                switch (localLang) {
                                  case 'ENG':
                                    _userController.profile.value.lang = 0;
                                    break;
                                  case '简体':
                                    _userController.profile.value.lang = 1;
                                    break;
                                  case '繁体':
                                    _userController.profile.value.lang = 2;
                                    break;
                                  default:
                                    _userController.profile.value.lang = 0;
                                }
                                LocalizationService().changeLocale(localLang);
                              } catch (error) {
                                LocalizationService().changeLocale('ENG');
                                Log.debug(error);
                              }
                            },
                            child: Container(
                              margin: EdgeInsets.all(3),
                              child:
                                  Stack(alignment: Alignment.center, children: [
                                Container(
                                  width: 42,
                                  height: 42,
                                  decoration: BoxDecoration(
                                    color: Get.isDarkMode
                                        ? Colors.white.withOpacity(0.3)
                                        : Get.theme.primaryColorLight
                                            .withOpacity(0.3),
                                    borderRadius: BorderRadius.circular(6),
                                    boxShadow: [
                                      BoxShadow(
                                        blurRadius: 6,
                                        spreadRadius: 1,
                                        color: Get.isDarkMode
                                            ? Colors.transparent
                                            : Colors.black.withOpacity(0.1),
                                        offset: Offset(3, 3),
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  width: 33,
                                  height: 33,
                                  decoration: BoxDecoration(
                                    color: Get.isDarkMode
                                        ? Get.theme.primaryColorDark
                                        : Get.theme.primaryColorDark
                                            .withOpacity(0.3),
                                    borderRadius: BorderRadius.circular(3),
                                  ),
                                ),
                                Container(
                                  child: Center(
                                    child: IconButton(
                                      icon: const Icon(
                                        Icons.language,
                                        size: 27.0,
                                      ),
                                      color: Get.isDarkMode
                                          ? Colors.black
                                          : Colors.white.withOpacity(0.8),
                                      onPressed: () {
                                        String localLang = 'ENG';
                                        try {
                                          _userController.setMyLang(localLang);
                                          switch (localLang) {
                                            case 'ENG':
                                              _userController
                                                  .profile.value.lang = 0;
                                              break;
                                            case '简体':
                                              _userController
                                                  .profile.value.lang = 1;
                                              break;
                                            case '繁体':
                                              _userController
                                                  .profile.value.lang = 2;
                                              break;
                                            default:
                                              _userController
                                                  .profile.value.lang = 0;
                                          }
                                          LocalizationService()
                                              .changeLocale(localLang);
                                        } catch (error) {
                                          LocalizationService()
                                              .changeLocale('ENG');
                                          Log.debug(error);
                                        }
                                      },
                                    ),
                                  ),
                                ),
                              ]),
                            ),
                          ),
                    Container(
                      margin: EdgeInsets.all(3),
                      child: Stack(alignment: Alignment.center, children: [
                        Container(
                          width: 42,
                          height: 42,
                          decoration: BoxDecoration(
                            color: Get.isDarkMode
                                ? Colors.white.withOpacity(0.3)
                                : Get.theme.primaryColorLight.withOpacity(0.3),
                            borderRadius: BorderRadius.circular(6),
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 6,
                                spreadRadius: 1,
                                color: Get.isDarkMode
                                    ? Colors.transparent
                                    : Colors.black.withOpacity(0.1),
                                offset: Offset(3, 3),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: 33,
                          height: 33,
                          decoration: BoxDecoration(
                            color: Get.isDarkMode
                                ? Get.theme.primaryColorDark
                                : Get.theme.primaryColorDark.withOpacity(0.3),
                            borderRadius: BorderRadius.circular(3),
                          ),
                        ),
                        Container(
                          child: Center(
                            child: IconButton(
                              icon: const Icon(
                                Icons.account_circle,
                                size: 24.0,
                              ),
                              color: Get.isDarkMode
                                  ? Colors.black
                                  : Colors.white.withOpacity(0.8),
                              onPressed: () {
                                String _userRole = box.get(
                                    CacheManagerKey['nanhairole'].toString());
                                switch (_userRole) {
                                  case Constants.NanhaiRole_Student:
                                    if (GetPlatform.isWeb) {
                                      Get.toNamed('/student/profile');
                                    } else {
                                      Get.offAllNamed('/student/profile');
                                    }
                                    break;
                                  case Constants.NanhaiRole_Individual:
                                    if (GetPlatform.isWeb) {
                                      Get.toNamed('/individual/profile');
                                    } else {
                                      Get.offAllNamed('/individual/profile');
                                    }
                                    break;
                                  case Constants.NanhaiRole_Teacher:
                                    if (GetPlatform.isWeb) {
                                      Get.toNamed('/teacher/profile');
                                    } else {
                                      Get.offAllNamed('/teacher/profile');
                                    }
                                    break;
                                  case Constants.NanhaiRole_SchoolAdmin:
                                    if (GetPlatform.isWeb) {
                                      Get.toNamed('/schooladmin/profile');
                                    } else {
                                      Get.offAllNamed('/schooladmin/profile');
                                    }
                                    break;
                                  case Constants.NanhaiRole_Parent:
                                    if (GetPlatform.isWeb) {
                                      Get.toNamed('/parent/profile');
                                    } else {
                                      Get.offAllNamed('/parent/profile');
                                    }
                                    break;
                                  default:
                                    Get.offAllNamed('/xlogin');
                                }
                              },
                            ),
                          ),
                        ),
                      ]),
                    ),
                    Container(
                      margin: EdgeInsets.all(3.0),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Container(
                            width: 42,
                            height: 42,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.white.withOpacity(0.3)
                                  : Get.theme.primaryColorLight
                                      .withOpacity(0.3),
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 6,
                                  spreadRadius: 1,
                                  color: Get.isDarkMode
                                      ? Colors.transparent
                                      : Colors.black.withOpacity(0.1),
                                  offset: Offset(3, 3),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: 33,
                            height: 33,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Get.theme.primaryColorDark.withOpacity(0.3),
                              borderRadius: BorderRadius.circular(3),
                            ),
                          ),
                          Container(
                            child: IconButton(
                              icon: const Icon(
                                Icons.help_center_outlined,
                                size: 27.0,
                              ),
                              color: Get.isDarkMode
                                  ? Colors.black
                                  : Colors.white.withOpacity(0.8),
                              onPressed: () {
                                Get.to(() => HelpDocsHome());
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.all(3.0),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Container(
                            width: 42,
                            height: 42,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Colors.white.withOpacity(0.3)
                                  : Get.theme.primaryColorLight
                                      .withOpacity(0.3),
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  blurRadius: 6,
                                  spreadRadius: 1,
                                  color: Get.isDarkMode
                                      ? Colors.transparent
                                      : Colors.black.withOpacity(0.1),
                                  offset: Offset(3, 3),
                                ),
                              ],
                            ),
                          ),
                          Container(
                            width: 33,
                            height: 33,
                            decoration: BoxDecoration(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Get.theme.primaryColorDark.withOpacity(0.3),
                              borderRadius: BorderRadius.circular(3),
                            ),
                          ),
                          Container(
                            child: IconButton(
                              icon: const Icon(
                                Icons.logout_rounded,
                                size: 27.0,
                              ),
                              color: Get.isDarkMode
                                  ? Colors.black
                                  : Colors.white.withOpacity(0.8),
                              onPressed: () {
                                // _booksController.bookFolders.clear();
                                _loginController.logOut();
                                Future.delayed(Duration(milliseconds: 800), () {
                                  Get.offAllNamed('/login');
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ));
  }
}
